import { useState, useCallback } from 'react'
import { DatePicker, Typography, Space, Button } from 'antd'
import { PlayCircleOutlined, PauseCircleOutlined } from '@ant-design/icons'
import { motion } from 'framer-motion'
import { useBoolean, useInterval } from 'ahooks'
import dayjs from 'dayjs'

const { Title, Text } = Typography

interface TimeLeft {
  days: number
  hours: number
  minutes: number
  seconds: number
}

const CountDown = () => {
  const [targetDate, setTargetDate] = useState<dayjs.Dayjs | null>(null)
  const [timeLeft, setTimeLeft] = useState<TimeLeft>({ days: 0, hours: 0, minutes: 0, seconds: 0 })
  const [isRunning, { setTrue, setFalse }] = useBoolean(false)

  const calculateTimeLeft = useCallback(() => {
    if (!targetDate) return

    const now = dayjs()
    const diff = targetDate.diff(now, 'second')

    if (diff <= 0) {
      setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 })
      setFalse()
      return
    }

    const days = Math.floor(diff / (24 * 60 * 60))
    const hours = Math.floor((diff % (24 * 60 * 60)) / (60 * 60))
    const minutes = Math.floor((diff % (60 * 60)) / 60)
    const seconds = diff % 60

    setTimeLeft({ days, hours, minutes, seconds })
  }, [targetDate, setFalse])

  useInterval(calculateTimeLeft, isRunning ? 1000 : undefined)

  const handleDateChange = (date: dayjs.Dayjs | null) => {
    setTargetDate(date)
    setFalse()
  }

  const handleStart = () => {
    if (targetDate && targetDate.isAfter(dayjs())) {
      calculateTimeLeft()
      setTrue()
    }
  }

  return (
    <Space direction="vertical" className="w-full" size="large" align="center">
      <DatePicker
        showTime
        className="w-80"
        placeholder="请选择目标日期和时间"
        onChange={handleDateChange}
        disabledDate={current => current && current.isBefore(dayjs(), 'day')}
        value={targetDate}
      />

      {targetDate && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center"
        >
          <Space direction="vertical" size="large">
        

            {isRunning && (
              <motion.div
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                className="flex justify-center gap-4"
              >
                <TimeBlock label="天" value={timeLeft.days} />
                <TimeBlock label="时" value={timeLeft.hours} />
                <TimeBlock label="分" value={timeLeft.minutes} />
                <TimeBlock label="秒" value={timeLeft.seconds} />
              </motion.div>
            )}

            <Button
              type={isRunning ? 'primary' : 'default'}
              icon={isRunning ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
              onClick={isRunning ? setFalse : handleStart}
              size="large"
              disabled={!targetDate || !targetDate.isAfter(dayjs())}
            >
              {isRunning ? '停止' : '开始'}
            </Button>
          </Space>
        </motion.div>
      )}
    </Space>
  )
}

// 时间块组件
const TimeBlock = ({ label, value }: { label: string; value: number }) => (
  <motion.div
    key={value}
    initial={{ scale: 0.8, opacity: 0.5 }}
    animate={{ scale: 1, opacity: 1 }}
    transition={{ duration: 0.2 }}
    className="flex flex-col items-center"
  >
    <Title level={1} className="!mb-0 !text-5xl">
      {String(value).padStart(2, '0')}
    </Title>
    <Text type="secondary" className="text-lg">
      {label}
    </Text>
  </motion.div>
)

export default CountDown 